<template>
  <div class="counter-wrapper">
    <div class="counter">
      <span class="minus count" @click="reduceGoodsAmount(goodsId)">-</span>
      <input type="number" :value="count" :max="maxCount" min="1" disabled />
      <span class="add count" @click="increaseGoodsAmount(goodsId)">+</span>
    </div>
    <div class="total">限购 {{ maxCount }} 件</div>
  </div>
</template>

<script>
export default {
  name: 'AddNumber',
  props: {
    'maxCount': {
      type: Number,
      required: true
    },
    'goodsId': {
      type: Number,
      required: true
    },
    'count': {
      type: Number,
      required: true
    },
    'increaseGoodsAmount': {
      type: Function,
      required: true
    },
    'reduceGoodsAmount': {
      type: Function,
      required: true
    }
  }
}
</script>

<style lang='scss'>
  .counter-wrapper{
    .counter{
        display: flex;
        align-items: center;
      input{
        width: 30px;
      }
      .count{
        padding: 0 6px;
        font-size: 18px;
        cursor: pointer;
        background-color: #fff0e7;
      }
    }
    .total{
      font-size: 13px;
      padding-top: 4px;
      color: #f22;
    }
  }
</style>
